<template>
  <div class="form-item">
     <label for=''>{{title}}</label>
     <div class="item-content">
         <input v-model="val" :type="type" v-if="type" >
         <slot></slot>
        <slot name="header"></slot>
     </div>
  </div>
</template>

<script>
export default {
   name:'FormItem',
   props:{
       title:{
           type:String,
           default:''
       },
        type:{
           type:String,
           default:''
       },
       value:{
           default:''
       },
       placeholder:{
           type:String,
           default:''
       }
   },
   data(){
       return {
           val:this.value
       }
   },
   watch:{
       value(newVal){
           this.val=newVal;
       },
       val(newVal){
           this.$emit('input',newVal)
       }
   }

}
</script>

<style lang='scss' scoped>
  .form-item{
       @include wh(100%,80px);
       @include flex(row,center,center);
       @include border1px();
       padding: 0 20px;
       min-height: 80px;
       max-height: auto;
       box-sizing:border-box;
       label{
           flex-shrink:0;
           width: 130px;
          font-size:$font-size-m;
          color:#ccc;
          display: flex;
        //   justify-content: center;
          align-items:center;
       }
       .item-content{
           flex: 1;
           height: 100%;
           input{
               display: block;
               border:0;
               width: 100%;
               height: 100%;
               outline: none;
           }
       }
  }
</style>